$(function () {
  // console.log(11);
  //功能一
  //裁剪的宽高比例
  const $image = $("#image");

  const option = {
    aspectRatio: 1,
    //实现预览
    preview: ".img-preview"
  };

  // Get the Cropper.js instance after initialized
  $image.cropper(option)

  //功能二:选择上传的图片（accept：仅支持png和jpeg图片）
  /* 
给上传按钮注册点击事件
手动触发文件选择框的点击事件
*/
  $("#btnChooseImage").on("click", function () {
    $("#file").click();
  });

  //功能三：替换选择图片
  /* 
  给文件选择框添加change事件
  判断是否选择了文件  DOM对象.files
  获取上传的文件信息
  将文件对象转换成路径的形式
  将url地址设置给图片src属性
  */

$('#file').on('change',function(){
  // 判断是否选择了文件  DOM对象.files
  const fileInfo = this.files
  if(fileInfo.length === 0) return layer.msg('请选择上传的图片')
  //获取上传的文件信息
  const file = fileInfo[0]
  //将文件对象转换成路径的形式
  const url = URL.createObjectURL(file)
  //将url地址设置给图片src属性
  $image.cropper('destroy')
  $image.attr('src',url)
  $image.cropper(option)
})

//功能四：裁剪效果图
/* 
点击确定按钮
获取裁剪之后的图片信息
发起ajax请求，提交数据到服务器
判断请求成功与否
如果成功，同步修改index.thml中的用户头像

*/
//点击确定按钮
$('#btnUpload').on('click',function(){
  //获取裁剪之后的图片信息
  const url = $image.cropper('getCroppedCanvas',{
    width:50,
    height:50
  }).toDataURL()
  //发起ajax请求，提交数据到服务器
  $.ajax({
    method:'post',
    url:'/my/update/avatar',
    data:{
      avatar:url
    },
    success:function(res){
      const {status,message} =res 
      if(status !== 0) return layer.msg(message,{icon:5})
      layer.msg(message,{icon:6})
      //如果成功，同步修改index.thml中的用户头像
      window.parent.getuserInfo()
    }
  })
})
});
